<!-- slideUpBtn.vue -->
<script setup>
// JavaScript 钩子逻辑...
import { ref } from 'vue'

const docState = ref('saved')
</script>

<template>
  <div>
    <span style="margin-right: 20px">Click to cycle through states:</span>
    <div class="btn-container">
      <!-- mode in-out  out-in -->
      <Transition name="slide-up" mode="out-in">
        <button class="slideBtn" v-if="docState === 'saved'" @click="docState = 'edited'">Edit</button>
        <button class="slideBtn" v-else-if="docState === 'edited'" @click="docState = 'editing'">Save</button>
        <button class="slideBtn" v-else-if="docState === 'editing'" @click="docState = 'saved'">Cancel</button>
      </Transition>
    </div>
  </div>
  <!-- 进入和离开的元素都是在同时开始动画的，因此会有二者同时出现的布局问题 -->
  <!-- 解决方案：1、添加position: absolute 样式；2、设置mode="out-in"。eg: in-out -->
</template>

<style>
/*
  必要的 CSS...
  注意：避免在这里使用 <style scoped>
  因为那不会应用到插槽内容上
*/
.btn-container {
  display: inline-block;
  position: relative;
  height: 1em;
}

/* button.slideBtn {
  position: absolute;
} */

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>
